<!-- 平面图 -->
<style>
  #rentFloorPlan .floor-drap{
    position: relative;
    width:100%;
    height: auto;
    background-color: #eee;
    margin:10px auto;
    display: flex;
    justify-content: center;
  }

  #rentFloorPlan .floor-drap #container{
    width: 100%;
  }

  #rentFloorPlan .floor-drap .floor-image{
    width:100%;
    height: auto;
  }

  #rentFloorPlan .floor-drap .drag-drop1{
    cursor: pointer;
    box-sizing: border-box;
    padding: 8px;
    font-size: 13px;
    color:#fff;
    position: absolute;
    left:0;
    top:0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color .3s;
  }

  #rentFloorPlan .floor-drap .drag-drop1 .posTit{
    position: relative;
    width:100%;
    text-align: center;
  }

  #rentFloorPlan .floor-drap .drag-drop1 .posTit span{
    width:100%;
    bottom: 0;
  }
  #rentFloorPlan .floor-drap .drag-drop1 .posTit p{
    width:100%;
    top:0;
  }
</style>

<section id="rentFloorPlan">
  <div class="floor-drap">
    <div id="container" v-if="imageUrl">
      <div id="outer-dropzone">
        <img class="floor-image" :src="imageUrl" alt="" />
      </div>

      <div v-for="(item, index) in locateUnitData"
        :data-width="item.width"
        :data-height="item.height"
        :data-x="item.paddingLeft"
        :data-y="item.paddingTop"
        :class="{'drag-drop1':true, 'cz-drap': item.rentState == 'IR', 'ly-drap': item.rentState == 'IP', 'dq-drap': item.rentState == 'DU', 'zy-drap': item.rentState == 'ZY', 'kz-drap': item.rentState == 'VA'}"
        :style="{transform: 'translate('+item.paddingLeft+'px, '+item.paddingTop+'px)', height: item.height + 'px', width: item.width +'px'}"
        v-if="item.locateType == 'Y'">

        <div class="posTit">
          <span :class="{'ellipsis-1': true, absoluteIf: item.company }">{{item.unitName}} - {{item.acreage}}m2 - {{item.businessType | formatBusinessType}}</span>
          <p class="ellipsis-1 absoluteIf" v-if="item.company">{{item.company}}</p>
        </div>
        <div class="pos-rent-info">
          <span>{{item.unitName}} - {{item.acreage}}m2 - {{item.businessType | formatBusinessType}}</span>
          <p>{{item.company}}</p>
        </div>
      </div>
    </div>
  </div>
</section>

<script src="modules/rent/scripts/floor_plan.js" charset="utf-8"></script>
